<template>
  <div>
    <!-- 头部区域 -->
   <app-header></app-header>
    <!-- 左侧边栏 -->
    <app-navbar></app-navbar>
    <!-- 右侧边栏 -->
    <app-main></app-main>
  </div>
</template>

<script>
import AppHeader from "../components/AppHeader";
import AppNavbar from "../components/AppNavbar";
import AppMain from "../components/AppMain";
export default {
  components: {
    AppHeader,
    AppNavbar,
    AppMain,
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style scoped >
/* 头部样式 */
.header {
  position: absolute;
  line-height: 50px;
  padding: 0px;
  top: 0px;
  left: 0px;
  right: 0px;
  background-color: #2d3a4b;
}
/* 左侧边栏样式 */
.navbar {
  position: absolute;
  width: 200px;
  top: 50px;
  left: 0px;
  bottom: 0px;
  overflow: auto;
  background-color: #545c64;
}
/* 右侧边栏样式 */
.main {
  position: absolute;
  top: 50px;
  left: 230px;
  right: 0px;
  bottom: 0px;
  padding: 10px;
  overflow: auto;
  background: #fff;
}
</style>
